<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <p>firstname: <input type="text" v-model="firstname"></p>
        <p>birthday: <input type="text" v-model="birthday"></p>
        <h3>{{fullname}}</h3>
        <h3>你的年龄是{{age}}</h3>
        obj的name <input type="text" v-model="obj.name">
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '李',
				fullname: '',
                birthday: '1998-10-24',
                age: '',
                obj: {
                    a: 12,
                    name: '张三'
                }
            },
            methods: {

            },
            computed: {
                // firstname() {
                //     this.fullname = this.lastname + this.firstname  
                // },
                birthday22() {
                    setTimeout(() => {
                        console.log('11');
                        this.age =  new Date().getFullYear() - new Date(this.birthday).getFullYear() -1
                    }, 2000)
                }
            },
            watch: {
                /*
                firstname(newval,oldval){
                    newval:指当前的值,
                    oldval:指上一次操作的值
                    console.log(newval+'-----'+oldval)
                    this.fullname=this.lastname+newval;
                },
                */

                // 这种写法只会在firstname改变的时候才开始执行一次
                // firstname() {
                //     this.fullname = this.lastname + this.firstname
                // }

                firstname: {
                    handler(newval, oldval) {
                        console.log(newval, oldval);
                        this.fullname = this.lastname + newval
                    },
                    immediate: true
                },
                // birthday: {
                //     handler(newval, oldval) {
                //         this.age = new Date().getFullYear() - new Date(newval).getFullYear()
                //     },
                //     immediate: true
                // },
                birthday: {
                    handler(newval, oldval) {
                        setTimeout(() => {
                            this.age = new Date().getFullYear() - new Date(newval).getFullYear()
                        }, 3000)
                    },
                    immediate: true
                },
                obj: {
                    handler(newval, oldval) {
                        console.log(newval + '=====' + oldval);
                        console.log('改变obj');
                    },
                    immediate: true,
                    deep: true
                }
            },
        })
    </script>
</body>
</html>